<template>
  <div>
    <!-- 插值表达式 -->
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age >= 18 ? '成年了' : '未成年' }}</h3>
    <hr/>

    <!-- 动态属性 -->
    <!-- 语法: v-bind:原生属性名="vue变量" -->
    <a v-bind:href="url">点击去百度</a>
    <!-- 语法: :原生属性名="vue变量" -->
    <img :src="imgUrl" height="20px" alt="imgUrl"/>
    <img :src="localImg" height="20px" alt="localImg">
    <hr/>

    <!-- 1. 绑定事件
     语法: v-on:事件名="少量代码"
     语法: v-on:事件名="methods里函数名"
     语法: v-on:事件名="methods里函数名(值)"
     语法: @事件名="methods里函数名"
     -->
    <p>你要购买商品的数量: {{ count }}</p>
    <button v-on:click="count = count + 1">+1</button>
    <button v-on:click="addFn">+1</button>
    <button v-on:click="addCountFn(5)">+5</button>
    <button @click="subFn">减少1</button>
    <hr/>

    <!-- 事件对象-->
    <a @click="one" href="http://www.baidu.com">百度</a>
    <hr/>
    <a @click="two(10, $event)" href="http://www.taobao.com">淘宝</a>
    <hr/>

    <!--    事件修饰符-->
    <div @click="fatherFn">
      <p @click.stop="oneFn">.stop - 阻止事件冒泡</p>
      <a href="http://www.baidu.com" @click.prevent.stop>去百度 不跳转</a>
      <p @click.once="twoFn">点击观察事件处理函数执行几次</p>
    </div>
    <hr/>

    <!--    键盘修饰符-->
    <!-- 1. 绑定键盘按下事件.enter-回车 -->
    <label>
      <input type="text" @keydown.enter="enterFn">
    </label>
    <!-- 2. .esc修饰符 - 取消键 -->
    <label>
      <input type="text" @keydown.esc="escFn">
    </label>
    <!-- 1. 变量准备-静态页面铺设 -->
    <h1>{{ msg }}</h1>
    <!-- 2. 绑定点击事件 -->
    <button @click="btn">逆转世界</button>
    <hr/>

    <span>用户名:</span>
    <!-- 1. v-model
       双向数据绑定
       value属性 - vue变量
     -->
    <label>
      <input type="text" v-model="username">
    </label>
    <span>密码: </span>
    <label>
      <input type="password" v-model="pass">
    </label>
    <div>
      <span>来自于: </span>
      <!-- 下拉菜单要绑定在select上 -->
      <label>
        <select v-model="from">
          <option value="北京市">北京</option>
          <option value="南京市">南京</option>
          <option value="天津市">天津</option>
        </select>
      </label>
    </div>
    <div>
      <!-- (重要)
      遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性
       -->
      <span>爱好: </span>
      <label>
        <input type="checkbox" v-model="hobby" value="抽烟">
      </label>抽烟
      <label>
        <input type="checkbox" v-model="hobby" value="喝酒">
      </label>喝酒
      <label>
        <input type="checkbox" v-model="hobby" value="写代码">
      </label>写代码
    </div>
    <div>
      <span>性别: </span>
      <label>
        <input type="radio" value="男" name="sex" v-model="gender">
      </label>男
      <label>
        <input type="radio" value="女" name="sex" v-model="gender">
      </label>女
    </div>
    <div>
      <span>自我介绍</span>
      <label>
        <textarea v-model="intro"></textarea>
      </label>
    </div>
    <div>
      <span>年龄</span>
      <!-- .number修饰符-把值parseFloat转数值再赋予给v-model对应的变量 -->
      <label>
        <input type="text" v-model.number="age">
      </label>
    </div>
    <div>
      <!-- .trim修饰 - 去除首尾两边空格 -->
      <span>人生格言</span>
      <label>
        <input type="text" v-model.trim="motto">
      </label>
    </div>
    <div>
      <!-- .lazy修饰符 - 失去焦点内容改变时(onchange事件), 把内容同步给v-model的变量 -->
      <span>个人简介</span>
      <label>
        <textarea v-model.lazy="intro"></textarea>
      </label>
    </div>
  </div>
</template>

<script>
import imgObj from '../assets/1.gif' // 唯独js需要导入图片文件(css/标签里可以直接使用图片地址)
export default {
  name: "BasicApi",
  data() {
    return {
      msg: 'Python',
      obj: {
        name: '小vue',
        age: 5
      },
      url: 'http://www.baidu.com',
      imgUrl: "http://yun.itheima.com/Upload/./Images/20210412/60741c11ab77b.jpg",
      localImg: imgObj,
      count: 1,
      username: "",
      pass: "",
      from: "",
      hobby: [],
      gender: "男",
      intro: "",
      age: null,
      motto: null
    }
  },
  // 2. 定义函数
  methods: {
    addFn() { // this代表export default后{}对象, data和methods里的属性都直接挂在它身上
      this.count++
    },
    addCountFn(num) {
      this.count = this.count + num
    },
    subFn() {
      this.count--
    },
    // 1. 事件触发, 无传值, 可以直接获取事件对象是
    one(e) {
      console.log(e);
      e.preventDefault()
    },
    // 2. 事件触发, 传值, 需要手动传入$event
    two(num, e) {
      console.log(num)
      console.log(e)
      e.preventDefault()
    },
    fatherFn() {
      console.log("father-触发click事件");
    },
    oneFn() {
      console.log("one p标签点击了");
    },
    twoFn() {
      console.log("two p标签被点击了");
    },
    enterFn() {
      console.log("用户按下的回车");
    },
    escFn() {
      console.log("用户按下esc键");
    },
    btn() {
      // // 3. 截取字符串返回数组
      // let arr = this.msg.split("")
      // // 4. 翻转
      // arr.reverse()
      // // 5. 数组拼接起来
      // this.msg = arr.join("")
      // 简化
      this.msg = this.msg.split("").reverse().join("")
    }
  }
}
</script>

<style scoped>

</style>
